{extend name="layout/default" /}
{block name="css"}
<style>
	#schedule-box{
		width: 100%;
		margin: 0 auto;
		padding: 35px 0;
		font-size: 13px;
	}
	.schedule-hd{
		display: flex;
		justify-content: space-between;
		padding: 0 15px;
	}
	.today{
		flex: 1;
		text-align: center;
	}
	.ul-box{
		overflow: hidden;
	}
	.ul-box > li{
		float: left;
		width: 14.28%;
		text-align: center;
		padding: 5px 0;
	}
	.other-month{
		color: #999999;
	}
	.current-month{
		color: #333333;
	}
	.today-style{
		border-radius: 50%;
		background: #58d321;
	}
	.arrow{
		cursor: pointer;
	}
	.dayStyle{
		display: inline-block;
		width: 35px;
		height: 35px;
		border-radius: 50%;
		text-align: center;
		line-height: 35px;
		cursor: pointer;
	}
	.current-month > .dayStyle:hover{
		background: #00BDFF;
		color: #ffffff;
	}
	.today-flag{
		background: #52AC7F;
		color: #fff;
	}
	.boxshaw{
		box-shadow: 2px 2px 15px 2px #e3e3e3;
	}
	.selected-style {
		background: #52AC7F;
		color: #ffffff;
	}
	.unconmplete {
		background: #E7E7E7;
		color: #ffffff;
	}
	.un-read {
		background: #EEB561;
		color: #ffffff;
	}
	#h3Ele{
		text-align: center;
		padding: 10px;
	}
</style>
{/block}
{block name="content"}
<div class="content">
	<div class="content-block">
		<div class="read-box">
			<b>糖尿病服务</b>
			<span>点击日期进入当日阅读</span>
		</div>
		<ul class="class-status">
			<li><i class="yd"></i><span>已读</span></li>
			<li><i class="bd"></i><span>补读</span></li>
			<li><i class="wwc"></i><span>未完成</span></li>
		</ul>
	</div>
	<div id='schedule-box' class="boxshaw"></div>
	<div>
		<h3 id='h3Ele'></h3>
	</div>
</div>
{/block}

{block name="script"}
<script src="__CDN__/assets/js/schedule.js"></script>
<script>
	var mySchedule = new Schedule({
		el: '#schedule-box',
		buidDate: {:json_encode($date)}
	});
</script>
{/block}
